<template>
  <div class="main">
    <div class="container" style="box-sizing: border-box">
      <!-- Sign Up -->
      <div class="box" style="position: relative">
        <div
          style="
            position: absolute;
            left: 3.125rem;
            top: 30px;
            color: #999999;
            cursor: pointer;
          "
          @click="back"
        >
          返回
        </div>
        <!-- 注册框开始 -->
        <div class="container--signup">
          <div action="#" class="form" id="form1">
            <h2 class="form__title">新用户注册</h2>
            <div class="ping">
              <div style="width: 100%">
                <input
                  type="text"
                  v-model="user.phone"
                  placeholder="手机号"
                  class="input"
                />
              </div>
            </div>
            <div class="yz">
              <input
                type="vcode"
                v-model="user.registerCode"
                placeholder="请输入验证码"
                class="input"
              />
              <!-- <button class="yzbtn" @click="getCode">{{code}}</button> -->
              <button class="yzbtn" @click="getCode" v-show="yamswitch">
                发送验证码
              </button>
              <button class="djstn" v-show="djsswitch">
                倒计时{{ djsnumber }}s
              </button>
            </div>
            <div class="yz">
              <input
                type="password"
                v-model="user.password"
                placeholder="设置密码"
                class="input"
              />
            </div>
            <div class="yz">
              <input
                type="password"
                v-model="password"
                placeholder="确认密码"
                class="input"
              />
            </div>

            <div class="yz" style="padding: 0.5em 0">
              <el-button
                size="medium"
                style="width: 100%"
                type="primary"
                round
                @click="next"
                >下一步</el-button
              >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
import { HttpManager } from "../../request/login.js";
import { Regular } from "../../utils/regular.js";
export default {
  data() {
    return {
      yamswitch: true,
      djsswitch: false,
      djsnumber: 60,
      code: "发送验证码",
      user: {
        phone: "",
        registerCode: "",
        password: "",
      },
      password: "",
    };
  },
  methods: {
    //注册
    next() {
      var params = this.qs.stringify(this.user);
      HttpManager.Registration(params).then((res) => {
        if (res.data.code === 200) {
          const token = res.data.token;
          localStorage.setItem("token", token); //本地储存token 用来备份以防丢失
          this.$router.push("/Login");
        } else if (res.data.code === 2002) {
          this.$message({
            message: res.data.message,
            type: "success",
          });
          user.phone = "";
          user.registerCode = "";
          user.password = "";
        } else if (res.data.code === 500) {
          alert("注册失败");
        }
      });
    },
    //返回
    back() {
      this.$router.push("/Login");
    },
    //获取验证码
    getCode() {
      const phonept =
        /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

      if (!phonept.test(this.user.phone)) {
        this.$message("请输入正确手机号");
        return false;
      }

      this.yamswitch = false;
      this.djsswitch = true;
      this.axios
        .get("/register/sendRegisterCode", {
          params: {
            phone: this.user.phone,
          },
        })
        .then((res) => {
          console.log(res);
          this.$message({
            message: res.data.message,
            type: "success",
          });
          if (this.djsnumber >= 0) {
            let set = setInterval(() => {
              this.djsnumber--;
              if (this.djsnumber === 0) {
                clearInterval(set);
                this.yamswitch = true;
                this.djsswitch = false;
                this.djsnumber = 60;
              }
            }, 1000);
          }
        });
    },
  },
};
</script>

<style scoped="scoped">
* {
  box-sizing: border-box;
  outline: none;
}

.main {
  /* COLORS */
  --white: #ffffff;
  --gray: #333;
  /* --blue: #0367a6; */
  --lightblue: #008997;

  /* RADII */
  --button-radius: 0.7rem;

  /* SIZES */
  --max-width: 382px;
  --max-height: 538px;

  font-size: 16px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen,
    Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}

.main {
  align-items: center;
  background-color: var(--white);
  /* background: url("https://res.cloudinary.com/dci1eujqw/image/upload/v1616769558/Codepen/waldemar-brandt-aThdSdgx0YM-unsplash_cnq4sb.jpg"); */
  background-attachment: fixed;
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 100vh;
  /* height: 25rem; */
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #00b6b4;
}

.form__title {
  font-weight: 300;
  margin: 0;
  margin-bottom: 1.25rem;
}

.link {
  color: var(--gray);
  font-size: 0.9rem;
  text-decoration: none;
}

.forgotPass {
  display: flex;
  justify-content: flex-end;
}

.container {
  background-color: var(--white);
  border-radius: var(--button-radius);
  box-shadow: 0 0.9rem 1.7rem rgba(0, 0, 0, 0.25),
    0 0.7rem 0.7rem rgba(0, 0, 0, 0.22);
  height: var(--max-height);
  width: 500px;
  overflow: hidden;
  position: relative;
}

.box {
  position: absolute;
  left: 0;
  width: 494px;
  height: 100%;
  display: flex;
  justify-content: space-between;
  transition: 1s all linear;
}

.container--signin,
.container--signup {
  width: 600px;
}

.btn {
  background-color: var(--blue);
  background-image: linear-gradient(
    90deg,
    var(--blue) 0%,
    var(--lightblue) 74%
  );
  border-radius: 20px;
  border: 1px solid var(--blue);
  color: var(--white);
  cursor: pointer;
  font-size: 0.8rem;
  font-weight: bold;
  letter-spacing: 0.1rem;
  padding: 0.9rem 4rem;
  text-transform: uppercase;
  transition: transform 80ms ease-in;
}

.form > .btn {
  margin-top: 1.5rem;
}

.btn:active {
  transform: scale(0.95);
}

.btn:focus {
  outline: none;
}

.form {
  background-color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  padding-left: 3rem;
  padding-right: 3rem;
  padding-top: 0;
  height: 100%;
  text-align: center;
}

.input {
  background-color: #fff;
  border: #ebebeb 0.0625rem solid;
  padding: 0.9rem 0.9rem;
  margin: 0.5rem 0;
  width: 100%;
  border-radius: 30px;
  height: 3rem;
  margin-bottom: 1.25rem;
}

.djstn {
  width: 7em;
  height: 3em;
  position: relative;
  top: 10px;
  border-radius: 30px;
  border: none;
  color: white;
  font-size: 12px;
  padding: 1px;
  background-color: #00b6b4;
}

.btnround {
  position: relative;
  top: 20px;
}

.yz {
  width: 100%;
  position: relative;
  display: flex;
}

.yzbtn {
  width: 7em;
  height: 3em;
  position: relative;
  top: 10px;
  border-radius: 30px;
  border: none;
  color: white;
  font-size: 12px;
  padding: 1px;
  background-color: #00b6b4;
}

.aa {
  width: 100%;
  height: 100%;
  display: flex;
}

.el-dropdown-link {
  cursor: pointer;
  color: #00b6b4;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.el-icon-arrow-down {
  font-size: 12px;
  display: flex;
}

.ping {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  position: relative;
}

.he {
  background-color: #fff;
  width: 30%;
  height: 60%;
  border: #ebebeb 0.0625rem solid;
  border-radius: 30px;
  margin-right: 15px;
  margin-bottom: 1.25rem;
}

.txt {
  width: 50%;
}

.el-button {
  /* background-image: #00b6b4; */
  background-color: #00b6b4;
  border: none;
  height: 3rem;
}

.el-button:hover {
  background-image: radial-gradient(
    circle 248px at center,
    #16d9e3 0%,
    #69bec2 47%,
    #00b6b4 100%
  );
}
</style>
